<template>
  <div
    class="Fg-divider"
    :style="{...newStyle,'--borderColor': newStyle.borderColor || '#DCDFE6','--bgColor':newStyle.backgroundColor||'#fff'}"
  >
    <el-divider v-bind="$attrs">
      <i :class="$attrs.icon" v-if="$attrs.icon" />
      {{modelValue}}
    </el-divider>
  </div>
</template>

<script>
import { comMixin } from "../../../utils/comMixins";
export default {
  mixins: [comMixin],
  name: "form-divider",
  props: {
    modelValue: {
      type: [String, Number],
      default: "",
    },
  },
};
</script>

<style lang="scss" >
.Fg-divider {
  font-size: 14px;
  .el-divider {
    background-color: var(--borderColor);
    text-decoration-line: inherit;
    text-decoration-color: inherit;
    text-decoration-style: inherit;
  }
  .el-divider--horizontal {
    margin: 0;
  }
  .el-divider__text {
    color: inherit;
    background-color: var(--bgColor);
    font-weight: inherit;
    font-size: inherit;
    text-decoration-line: inherit;
    text-decoration-color: inherit;
    text-decoration-style: inherit;
  }
}
</style>
